<template>
    <div>
        <div class="vinput-box" :class="disabled ? 'disable-color' : ''">
            <span style="color:red;margin-right: 5px;" v-if="required">*</span>
            <input v-model="itemValue" class="vinput" :disabled="disabled" @click="handleClick"
                :placeholder="placeholder" />
            <van-icon name="arrow" color="#C0C4CC" v-if="showArrow" />
        </div>

        <!-- bool -->
        <van-action-sheet v-model="showeBoolPopup" :actions="actions" @select="handleSelected" cancel-text="取消" />
    </div>

</template>
<script>
export default {
    name: '',
    components: {

    },
    mixins: [],
    props: {
        formItem: {
            type: Object,
            default: null,
        },

        scene: {
            type: String,
            default: "form",
        },

        mapData: {
            type: Object,
            default: () => {
                return {
                    lat: 39.907503,
                    lng: 116.419936,
                }
            }
        },
        tableType: {
            type: String,
            default: "head",
        },
        bodyDataName: {
            type: String,
            default: "",
        },
        bodyDataIndex: {
            type: String | Number,
            default: 0,
        },

        handleShowNumberKeyboardSpace: {
            type: Function,
            default: () => { },
        },

        jsondata: {
            type: Object,
            default: null,
        },

    },
    data() {
        return {
            itemValue: "",
            showArrow: false,
            placeholder: this.formItem.lCanInput === "0" ? "请输入" : "请输入" + this.formItem.sTitle,
            required: this.formItem.lMustInput === "0" ? false : true,
            isShow: this.formItem.lCanOutput === "0" ? false : true,
            disabled: this.formItem.lCanInput === "0" ? true : false,
            sUIType: this.formItem.sUITypeExp,
            sUIType: this.formItem.sUIType,
            sFormat: this.formItem.sFormat,

            showeBoolPopup: false,

            actions: []
        }
    },
    computed: {

    },
    watch: {
        "formItem":{
            handler(value){
                this.itemValue = this.formItem.value
            },
            deep:true
        }

    },
    mounted() {

        this.init()


    },
    methods: {
        init() {
            this.handleShowArrow()
            this.itemValue = this.formItem.value

        },
        handleShowArrow() {
            switch (this.sUIType) {
                case "string":
                    this.showArrow = false
                    break;

                case "int":
                    this.showArrow = false
                    break;
                case "double":
                    this.showArrow = false
                    break;
                case "url":
                    this.showArrow = false
                    break;
                case "datetime":
                    this.showArrow = true
                    break;
                case "map":
                    this.showArrow = true
                    break;
                case "enum":
                    this.showArrow = true
                    break;
                case "date":
                    this.showArrow = true
                    break;
                case "ref":
                    this.showArrow = true
                    break;

                case "bool":
                    this.showArrow = true
                    break;

                case "boolean":
                    this.showArrow = true
                    break;
            }

        },


        handleClick() {
            if (this.disabled === true) {
                return;
            }

            //字符串
            if (this.sUIType === "string") {

                if (this.sFormat === "yearmonth;") {
                    // this.dataColumnsType = ['year', 'month']
                    // const nowtime = itemValue.value == "" ? getCurrentTime("", "yearmonth") : itemValue.value;
                    // currentDateArr.value = nowtime.split("-")
                    // showDatePopup.value = true
                }

                if (this.sFormat.indexOf("refer") !== -1) {
                    const content = this.getContentBetween(this.sFormat, "refer:", ";")
                    this.referArr = content.split(",").map((item) => {
                        return { name: item }
                    })
                    this.showReferSheet = true
                }
            }

            // 枚举
            if (this.sUIType === "enum") {
                this.showEnumPopup = true;
                const enumIdArr = this.formItem.allenumid
                    .split(";")
                    .filter((item) => item);

                this.enumArr = this.formItem.allenumval
                    .split(";")
                    .filter((item) => item)
                    .map((item, index) => {
                        return { text: item, value: item, id: enumIdArr[index] };
                    });
            }

            // 日期时间
            if (this.sUIType === "datetime") {
                this.showDatePopup = true;
            }

            // 日期时间
            if (this.sUIType === "date") {
                this.showDatePopup = true;
            }

            // 参照
            if (this.sUIType === "ref") {
                this.showeRefPopup = true;
            }

            //布尔
            if (this.sUIType === "bool") {
                this.actions = []
                // this.clickmodel = datamodel
                this.actions.push({ id: '1', name: '是' })
                this.actions.push({ id: '0', name: '否' })

                this.showeBoolPopup = true;
            }

        },
        handleSelected(item) {
            // itemValue.value = item.name
            this.$emit("handleChange",this.formItem,item.name,item.id)
            
            // this.clickmodel.valuehidden = item.id
            // this.clickmodel.value = item.name
     
            // this.$emit('handleFiledLink', { sField: this.itemdata.sField, value: item.id, ishead: this.ishead, index: this.index })
            // this.itemdata.value = item.name
            this.errormsg = ''
            this.showeBoolPopup = false

        }
    }
};
</script>
<style scoped>
.vinput-box {
    border-radius: 4px;
    padding: 2px 4px;
    border: 1px solid #E4E7ED;
    display: flex;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.disable-color {
    background-color: #eff0f2;
}

.vinput {
    all: unset;
    /* border:none; */
    width: 90%;
}

.vinput::placeholder {
    color: #C0C4CC !important
}

input:disabled::placeholder {
    color: #C0C4CC;
}

input[disabled],
input:disabled,
input.disabled,
.van-field__control:disabled {
    color: #C0C4CC !important;
    -webkit-text-fill-color: #C0C4CC !important;
    -webkit-opacity: 1 !important;
    opacity: 1 !important;
}
</style>